<template>
  <footer class="footer">
    <div class="footer-main">
      <div class="main-content">
        <div class="footer-column help">
        <h3 class="footer-title">帮助</h3>
        <p class="contact-info">欢迎致电 025-58328517 联系咨询顾问</p>
      </div>

      <div class="footer-column brand">
        <h3 class="footer-title">品牌</h3>
        <ul class="footer-links">
          <li><a href="#">最新消息</a></li>
          <li><a href="#">艺术与文化</a></li>
        </ul>
      </div>

      <div class="footer-column follow-us">
        <h3 class="footer-title">关注我们</h3>
        <div class="social-links">
          <span>微信
            <a-popover placement="left" :overlayInnerStyle="{ padding: '0', overflow: 'hidden' }">
              <template #content>
                <img src="../assets/images/qrcode.png" alt="微信二维码" />
              </template>
              <svg t="1748134718906" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2676" width="200" height="200"><path d="M615.904 388.48c8.8 0 17.536 0.64 26.176 1.6-23.52-109.536-140.608-190.912-274.272-190.912C218.4 199.2 96 301.056 96 430.4c0 74.656 40.736 135.936 108.768 183.488l-27.2 81.792 95.04-47.648c33.984 6.72 61.28 13.632 95.2 13.632 8.544 0 16.992-0.416 25.376-1.088a202.496 202.496 0 0 1-8.384-56.96c0-118.752 101.984-215.136 231.104-215.136zM469.76 314.784c20.48 0 34.016 13.472 34.016 33.92 0 20.352-13.536 34.016-34.016 34.016-20.384 0-40.832-13.664-40.832-34.016 0-20.448 20.448-33.92 40.832-33.92zM279.52 382.72c-20.384 0-40.928-13.664-40.928-34.016 0-20.448 20.544-33.92 40.928-33.92 20.352 0 33.92 13.472 33.92 33.92 0 20.384-13.568 34.016-33.92 34.016z" fill="" p-id="2677"></path><path d="M864 600.352c0-108.672-108.736-197.28-230.88-197.28-129.344 0-231.2 88.576-231.2 197.28 0 108.864 101.856 197.248 231.2 197.248 27.072 0 54.368-6.816 81.568-13.632l74.56 40.8-20.448-67.904C823.328 715.936 864 661.664 864 600.352z m-305.856-34.016c-13.536 0-27.2-13.44-27.2-27.2 0-13.568 13.664-27.2 27.2-27.2 20.576 0 34.016 13.632 34.016 27.2 0 13.76-13.44 27.2-34.016 27.2z m149.536 0c-13.44 0-27.008-13.44-27.008-27.2 0-13.568 13.568-27.2 27.008-27.2 20.352 0 34.016 13.632 34.016 27.2 0 13.76-13.664 27.2-34.016 27.2z" fill="" p-id="2678"></path></svg>
            </a-popover>
          </span>
          <span >微博
            <svg style="height: 18px;" t="1748134662697" class="icon" viewBox="0 0 1138 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1490" width="200" height="200"><path d="M914.432 518.144q27.648 21.504 38.912 51.712t9.216 62.976-14.336 65.536-31.744 59.392q-34.816 48.128-78.848 81.92t-91.136 56.32-94.72 35.328-89.6 18.944-75.264 7.68-51.712 1.536-49.152-2.56-68.096-10.24-78.336-21.504-79.872-36.352-74.24-55.296-59.904-78.848q-16.384-29.696-22.016-63.488t-5.632-86.016q0-22.528 7.68-51.2t27.136-63.488 53.248-75.776 86.016-90.112q51.2-48.128 105.984-85.504t117.248-57.856q28.672-10.24 63.488-11.264t57.344 11.264q10.24 11.264 19.456 23.04t12.288 29.184q3.072 14.336 0.512 27.648t-5.632 26.624-5.12 25.6 2.048 22.528q17.408 2.048 33.792-1.536t31.744-9.216 31.232-11.776 33.28-9.216q27.648-5.12 54.784-4.608t49.152 7.68 36.352 22.016 17.408 38.4q2.048 14.336-2.048 26.624t-8.704 23.04-7.168 22.016 1.536 23.552q3.072 7.168 14.848 13.312t27.136 12.288 32.256 13.312 29.184 16.384zM656.384 836.608q26.624-16.384 53.76-45.056t44.032-64 18.944-75.776-20.48-81.408q-19.456-33.792-47.616-57.344t-62.976-37.376-74.24-19.968-80.384-6.144q-78.848 0-139.776 16.384t-105.472 43.008-72.192 60.416-38.912 68.608q-11.264 33.792-6.656 67.072t20.992 62.976 42.496 53.248 57.856 37.888q58.368 25.6 119.296 32.256t116.224 0.512 100.864-21.504 74.24-33.792zM522.24 513.024q20.48 8.192 38.912 18.432t32.768 27.648q10.24 12.288 17.92 30.72t10.752 39.424 1.536 42.496-9.728 38.912q-8.192 18.432-19.968 37.376t-28.672 35.328-40.448 29.184-57.344 18.944q-61.44 11.264-117.76-11.264t-88.064-74.752q-12.288-39.936-13.312-70.656t16.384-66.56q13.312-27.648 40.448-51.712t62.464-38.912 75.264-17.408 78.848 12.8zM359.424 764.928q37.888 3.072 57.856-18.432t21.504-48.128-15.36-47.616-52.736-16.896q-27.648 3.072-43.008 23.552t-17.408 43.52 9.728 42.496 39.424 21.504zM778.24 6.144q74.752 0 139.776 19.968t113.664 57.856 76.288 92.16 27.648 122.88q0 33.792-16.384 50.688t-35.328 17.408-35.328-14.336-16.384-45.568q0-40.96-22.528-77.824t-59.392-64.512-84.48-43.52-96.768-15.872q-31.744 0-47.104-15.36t-14.336-34.304 18.944-34.304 51.712-15.36zM778.24 169.984q95.232 0 144.384 48.64t49.152 146.944q0 30.72-10.24 43.52t-22.528 11.264-22.528-14.848-10.24-35.84q0-60.416-34.816-96.256t-93.184-35.84q-19.456 0-28.672-10.752t-9.216-23.04 9.728-23.04 28.16-10.752z" p-id="1491"></path></svg>
          </span>
          <span>
            小红书
            <svg t="1748133776864" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1508" width="200" height="200"><path d="M19.242667 401.066667h68.053333s-7.936 113.962667-10.026667 133.973333c-2.090667 20.053333-9.6 73.898667-39.253333 108.117333L3.370667 567.594667c0 0.042667 7.936-7.509333 15.872-166.528zM133.461333 310.656h68.437334v315.008s-13.909333 49.536-52.309334 48.981333h-36.736l-29.866666-59.349333h44.074666c4.736 0 4.608-6.528 4.608-4.778667 0.042667 3.882667 1.792-299.861333 1.792-299.861333zM476.288 307.84l-34.517333 77.909333s-6.101333 15.573333 3.882666 16.128c10.026667 0.554667 57.301333 0 57.301334 0l-47.872 107.392s-4.992 13.909333 4.437333 13.909334h35.626667l-23.722667 55.637333h-78.08s-33.962667-4.992-20.053333-35.626667 34.517333-79.018667 34.517333-79.018666l-35.072 0.554666s-31.701333-6.698667-16.128-38.954666c15.573333-32.298667 54.528-117.973333 54.528-117.973334h65.152zM247.552 400.256H314.88s8.917333 162.773333 16 163.370667l-34.389333 77.610666s-31.701333-23.936-40.064-120.490666c-6.869333-79.701333-8.874667-120.490667-8.874667-120.490667zM362.752 600.576s2.218667 6.101333 27.818667 6.101333h77.909333l-31.146667 67.328H354.389333s-24.192 0.554667-23.509333-7.253333l31.872-66.176zM679.424 333.44v67.370667h-42.325333v205.909333h65.706666v67.328h-225.408l29.482667-66.773333h57.898667l1.109333-207.018667-40.618667-0.554667-1.664-66.261333z" p-id="1509"></path><path d="M1024 615.04v-94.592c0-56.192-59.648-58.453333-59.648-58.453333h-17.237333V399.658667c0.554667-57.301333-68.992-66.218667-68.992-66.218667h-42.837334v-26.154667h-66.773333l1.109333 26.154667h-47.317333v66.218667h45.653333v62.890666H698.88v67.328l68.992 0.554667v143.573333h67.328V529.92h107.392c14.464 0 15.573333 14.464 15.573333 14.464s3.626667 39.381333 2.645334 56.192c-0.981333 16.682667-13.226667 15.573333-13.226667 15.573333h-55.637333l26.709333 57.898667h50.645333c59.050667 0 54.698667-59.008 54.698667-59.008z m-142.592-209.493333v55.637333H834.133333V400.512h40.362667c7.808 0 6.912 5.034667 6.912 5.034667z" p-id="1510"></path><path d="M992 398.549333H960v-32c0-17.578667 14.421333-32 32-32 17.621333 0 32 14.421333 32 32s-14.378667 32-32 32z" p-id="1511"></path></svg>
          </span>
        </div>
      </div>

      <div class="footer-column legal">
        <h3 class="footer-title">法律声明</h3>
        <a href="#">隐私条款</a>
      </div>
        
      </div>
    </div>

    <div class="footer-logo">
      <img src="../assets/images/footerlogo.png" alt="YOUNGYUAN" class="logo-image" />
    </div>

    <div class="footer-bottom">
      <p class="copyright">2023通苑艺术YANGYUAN-保留所有</p>
      <p class="icp">苏ICP备8888888888号</p>
      <p class="police">苏公网安备</p>
      <p class="license">出版物经营许可证</p>
    </div>
  </footer>
</template>

<script setup>
// 可以添加需要的数据或方法
</script>

<style scoped>
.footer {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.footer-main {
  width: 100%;
  padding: 7rem 1rem;
  background-color: #3b2b4d;
  color: white;
}

.main-content {
  display: flex;
  justify-content: space-around;
  width: fit-content;
  margin: 0 auto;
  max-width: 100vw;
  padding-left: 20%;
}

.footer-column {
  display: flex;
  flex-direction: column;
  padding-left: 1rem;
  width: 26rem;
  border-left: 1px solid #fff;
}

.footer-title {
  margin-bottom: 1rem;
  font-size: 1rem;
  font-weight: normal;
}

.contact-info {
  font-size: 0.9rem;
  opacity: 0.8;
}

.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-links a, .social-links span, .legal a {
  color: white;
  text-decoration: none;
  opacity: 0.8;
  transition: opacity 0.3s;
}

.social-links span {
  svg {
    margin-left: 4px;
    height: 26px;
    cursor: pointer;
    width: fit-content;
    vertical-align: middle;
    fill: #9b92a7;
    &:hover {
      fill: white;
    }
  }
}

.footer-links a:hover, .social-links a:hover, .legal a:hover {
  opacity: 1;
}

.qrcode {
  width: 80px;
  height: 80px;
  margin-bottom: 0.5rem;
}

.qr-image {
  width: 100%;
  height: 100%;
}

.social-links {
  display: flex;
  flex-direction: column;
}


.footer-logo {
  margin: 2rem 0;
  margin-top: 6rem;
  border-bottom: 1px dashed #DCDCDC;
  width: 100%;
  text-align: center;
  .logo-image {
    margin: 0 auto;
    margin-bottom: 6rem;
  }
}

.logo-image {
  height: 12.5rem;
}

.footer-bottom {
  width: 100%;
  max-width: 1200px;
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  padding: 1rem 0;
  color: #888888;
  font-size: 0.6rem;
  p {
    text-align: center;
  }
}

@media (max-width: 768px) {
  .footer-main {
    flex-direction: column;
    padding: 2rem;
  }

  .footer-column {
    margin-bottom: 2rem;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
  }
}
</style> 